<template>
    <div class="container">
        <!-- <div class="container-filter">
            <custom-filter @onSubmit="handleInitTable" @onReset="handleResetTable" hideEnabled></custom-filter>
        </div> -->
        <div class="container-data">
            <a-table
                :columns="columns"
                :data-source="list"
                :row-key="setRowKey"
                :pagination="pagination"
                class="dept-data__table-table"
                @change="handleTableChange"
                :loading="loading"
            >
                <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                    <span>{{ t(`yl.${item.slotName}`) }}</span>
                </template>

                <template #custSource="{ record }">
                    {{ record.source == 1 ? '标准' : record.source == 2 ? '总部' : '本店' }}
                </template>

                <template #imgUrl="{ record }">
                    <img style="width: 80px" :src="record.templateImgeUrl" alt="" />
                </template>
                <template #templateRelevanceFun="{ record }">
                    <!-- {{ record.templateRelevance }} -->
                    <span v-for="(item, index) in record.templateRelevance" :key="index">{{ item.templateName }}</span>
                </template>
                <template #templateGroupFun="{ record }">
                    <!-- {{ record.templateGroup }} -->
                    <span v-if="!record.templateGroup.length">--</span>
                    <span v-for="(item, index) in record.templateGroup" :key="index">{{ item.templateName }}</span>
                </template>

                <template #customAction="{ record }">
                    <a-button class="action-btn" @click="handCopy(record)" size="small">
                        <template #icon>
                            <CopyOutlined />
                        </template>
                    </a-button>
                    <a-button class="action-btn" @click="handleEdit(record)" size="small">
                        <template #icon>
                            <EditOutlined />
                        </template>
                    </a-button>
                    <a-button class="action-btn" size="small" @click.stop="relevanceFun(record)">
                        <template #icon>
                            <BlockOutlined />
                        </template>
                    </a-button>
                    <a-popconfirm placement="topRight" @confirm="delFun(record)">
                        <template #title>
                            <p>{{ t('yl.deleteConfirmtext') }}</p>
                        </template>
                        <a-button class="action-btn" size="small">
                            <template #icon>
                                <DeleteOutlined />
                            </template>
                        </a-button>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>
        <relevanceModel
            v-if="relevanceModl"
            :visible="relevanceModl"
            :title="relevanceTitle"
            :templateCode="templateCode"
            :templateName="templateName"
            :tagColourName="tagColourName"
            :relationTemplateCode="relationTemplateCode"
            :type="relevanceType"
            :templateList="templateList"
            @submit="handleSubmit"
        ></relevanceModel>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed, createVNode } from 'vue';
import { CopyOutlined, EditOutlined, BlockOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n';
import ylMultiButton from '@/components/ylMultiButton.vue';
import relevanceModel from '../relevanceModel.vue';
import columns from './listColumns';
import { delTemplate } from '@/api/templates';
import { deleteEmptyKey } from '@/utils/help';
export default defineComponent({
    name: 'department',
    components: {
        ylMultiButton,
        CopyOutlined,
        EditOutlined,
        BlockOutlined,
        relevanceModel,
    },

    props: {
        list: {
            type: Array,
            default: () => [],
        },
        pagination: {
            type: Object,
            default: () => {},
        },
        loading: {
            type: Boolean,
            default: () => true,
        },
    },
    setup(props, { emit }) {
        const { t } = useI18n();
        console.log(props);
        // 搜索条件
        const setRowKey = (record: { [x: string]: any }) => record.id;
        const list = computed(() => props.list);
        const pagination = computed(() => props.pagination);
        const loading = computed(() => props.loading);
        const state = reactive({
            relevanceType: '',
            templateCode: '',
            templateName: '',
            relevanceTitle: t('yl.tmpModelTitle'),
            relevanceModl: false,
            relationTemplateCode: '',
            templateList: [],
            tagColourName: '',
        });
        console.log(pagination);
        const handleTableChange = (pagination: any) => {
            console.log(pagination);
            const { current } = pagination;
            console.log(current);
            // tableQuery.page = current - 1;
            // getUsersData(tableQuery);
            emit('handleTableChange', current);
        };
        const handleEdit = (item: any) => {
            emit('handleEdit', item.templateCode);
        };
        const handCopy = (item: any) => {
            // copy.copytemplateCode = item.templateCode;
            // copy.copytemplateName = item.templateName;
            // copy.copyModl = true;

            emit('handCopy', item.templateCode);
        };
        const relevanceFun = (item: any) => {
            console.log(item);
            state.templateCode = item.templateCode;
            state.templateName = item.templateName;
            state.tagColourName = item.tagColourName;
            state.relationTemplateCode =
                item.templateGroup && item.templateGroup.length ? item.templateGroup[0].templateCode : '';
            state.templateList = item.templateRelevance;
            state.relevanceModl = true;
            console.log(state);
        };
        const handleSubmit = (type: string) => {
            if (type == 'submit') {
                state.relevanceModl = false;
                emit('handRelation');
            } else {
                state.relevanceModl = false;
            }
        };
        //
        const delFun = (item: any) => {
            console.log(item);
            delTemplate(item.templateCode).then((res) => {
                handleTableChange(pagination.value);
            });
        };
        return {
            t,
            setRowKey,
            columns,
            list,
            pagination,
            loading,
            handleTableChange,
            handleEdit,
            handCopy,
            relevanceFun,
            ...toRefs(state),
            handleSubmit,
            delFun,
        };
    },
});
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    &-filter {
        @include flex;
        &-item {
            margin-right: 20px;
        }
    }
    &-data {
        // padding: $padding20 $padding0;
        .multi-action {
            background: $white;
        }
        .action-btn + .action-btn {
        }
    }
}
</style>
